<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一点通后台管理</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/admin.css">

</head>

<body>

    <header class="navbar fixed-top bg-light shadow">
        <div class="container-fluid">
            <a class="navbar-brand col-md-3  px-3" href="#">
                <img src="images/logo.png" height="40px" alt="">
            </a>
            <!-- <div class="d-flex align-items-center d-none d-lg-block">
                <span>admin</span>
                <a href="#" class="text-red">
                    <svg class="bi logout ms-2"><use xlink:href="#logout"></use></svg>
                </a>
            </div> -->
            <ul class="navbar-nav flex-row d-lg-none">
                <li class="nav-item text-nowrap">
                    <button class="nav-link px-3 text-secondary" type="button" data-bs-toggle="modal" data-bs-target="#searchModal">
                  <svg class="bi"><use xlink:href="#search"></use></svg>
                </button>
                </li>
                <li class="nav-item text-nowrap">
                    <button class="nav-link px-3 text-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu">
                  <svg class="bi"><use xlink:href="#list"></use></svg>
                </button>
                </li>
            </ul>
        </div>
    </header>
    <!-- 模态框开始 -->
    <div class="modal" tabindex="-1" id="searchModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">标题</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    <input class="form-control" type="text" placeholder="Search">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框结束 -->

    <!-- 侧导航结束 -->
    <!-- 主体内容开始 -->

    <div class="container-fluid ">
        <div class="row">
            <div class="offcanvas-lg   offcanvas-end bg-body-tertiary col-lg-3 col-xl-2 mt-lg-2 pt-lg-5  position-fixed h-100 " tabindex="-1" id="sidebarMenu">
                <div class="offcanvas-header text-red fw-bold">
                    <h5 class="offcanvas-title">一点通</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu"></button>
                </div>
                <div class="offcanvas-body d-flex flex-column p-3 h-100">
                    <ul class="nav nav-pills flex-column mb-auto">
                        <li class="nav-item">
                            <a href="#" class="nav-link ">
                                <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"></use></svg> 首页
                            </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link ">
                                <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg> 订单管理
                            </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link ">
                                <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg> 新闻管理
                            </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link  active">
                                <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"></use></svg> 商品管理
                            </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link ">
                                <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"></use></svg> 客户管理
                            </a>
                        </li>
                    </ul>
                    <hr>

                    <div class="d-flex align-items-center ms-3">
                        <span>admin</span>
                        <a href="#" class="text-red">
                            <svg class="bi logout ms-2"><use xlink:href="#logout"></use></svg>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-9 col-xl-10 ms-auto mt-5 pt-5 px-5" id="app">
                <h2 class="my-2 fw-bold">{{message}}</h2>
                <div class="mt-4">
                    <table class="table table-striped table-hover table-light table-bordered align-middle  text-nowrap text-center ">
                        <thead>
                            <tr class="table-dark">
                                <th>商品编号</th>
                                <th>商品名称</th>
                                <th>商品图片</th>
                                <th>商品类型</th>
                                <th>商品品牌</th>
                                <th>商品价格</th>
                                <th>商家时间</th>
                                <th>修改</th>
                                <th>删除</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in items">
                                <td>{{item.id}}</td>
                                <td>{{item.productName}}</td>
                                <td>
                                    <img :src="item.image" height="80px">
                                </td>
                                <td>{{item.productName}}</td>
                                <td>{{item.productBrand}}</td>
                                <td>￥{{item.price}}</td>
                                <td>{{item.time}}</td>
                                <td><button type="button" class="btn btn-red btn-sm"> 修改</button></td>
                                <td><button class="btn btn-secondary btn-sm"> 删除</button></td>
                            </tr>
                            <!-- <tr>
                                <td>2</td>
                                <td>苹果 iPhone X</td>
                                <td><img src="images/phone/iphone2.jpg" height="80px" alt=""></td>
                                <td>手机</td>
                                <td>苹果</td>
                                <td>￥2000</td>
                                <td>2016/09/25</td>
                                <td><button type="button" class="btn btn-red btn-sm"> 修改</button></td>
                                <td><button class="btn btn-secondary btn-sm"> 删除</button></td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>苹果 iPhone X</td>
                                <td><img src="images/phone/iphone3.jpg" height="80px" alt=""></td>
                                <td>手机</td>
                                <td>苹果</td>
                                <td>￥2000</td>
                                <td>2016/09/25</td>
                                <td><button type="button" class="btn btn-red btn-sm"> 修改</button></td>
                                <td><button class="btn btn-secondary btn-sm"> 删除</button></td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>苹果 iPhone X</td>
                                <td><img src="images/phone/iphone4.jpg" height="80px" alt=""></td>
                                <td>手机</td>
                                <td>苹果</td>
                                <td>￥2000</td>
                                <td>2016/09/25</td>
                                <td><button type="button" class="btn btn-red btn-sm"> 修改</button></td>
                                <td><button class="btn btn-secondary btn-sm"> 删除</button></td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>苹果 iPhone X</td>
                                <td><img src="images/phone/iphone5.jpg" height="80px" alt=""></td>
                                <td>手机</td>
                                <td>苹果</td>
                                <td>￥2000</td>
                                <td>2016/09/25</td>
                                <td><button type="button" class="btn btn-red btn-sm"> 修改</button></td>
                                <td><button class="btn btn-secondary btn-sm"> 删除</button></td>
                            </tr> -->

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 主体内容结束 -->


    <svg xmlns="http://www.w3.org/2000/svg" class="d-none">       
        <symbol id="list" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
        </symbol>     
        <symbol id="search" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
        </symbol>       
        <symbol id="home" viewBox="0 0 16 16">
            <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
          </symbol>
          <symbol id="speedometer2" viewBox="0 0 16 16">
            <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
            <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
          </symbol>
          <symbol id="table" viewBox="0 0 16 16">
            <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
          </symbol>
          <symbol id="people-circle" viewBox="0 0 16 16">
            <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
            <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
          </symbol>
          <symbol id="grid" viewBox="0 0 16 16">
            <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
          </symbol>  
          <symbol id="logout" viewBox="0 0 1024 1024">
              <path d="M761.607758 636.772848c-12.815515 32.023273-35.219394 60.819394-57.623273 86.388364a256 256 0 0 1-86.388364 57.654303c-31.992242 12.784485-67.180606 22.372848-105.596121 22.372849s-73.572848-6.392242-105.596121-22.372849a406.590061 406.590061 0 0 1-86.388364-57.654303 255.720727 255.720727 0 0 1-57.592242-86.388364c-12.846545-31.961212-22.434909-67.211636-22.434909-105.596121 0-22.341818 3.227152-44.776727 6.423272-63.984485 6.361212-22.341818 12.784485-41.580606 22.372849-60.819394 9.619394-19.145697 22.403879-35.157333 35.219394-54.396121A215.350303 215.350303 0 0 1 352.007758 307.2c9.619394-6.423273 19.207758-9.588364 28.796121-6.423273 9.619394 3.258182 19.207758 6.423273 25.6 16.011637 6.423273 9.588364 9.619394 19.238788 6.423273 28.796121-3.227152 9.619394-6.423273 19.176727-16.042667 25.6-25.6 19.207758-47.972848 41.611636-60.788364 70.376727-12.784485 28.858182-22.434909 57.623273-22.434909 89.615515 0 25.6 6.423273 51.2 16.011636 76.8 9.619394 25.6 25.6 44.838788 41.611637 60.819394a187.578182 187.578182 0 0 0 60.819394 41.580606c24.203636 10.550303 50.362182 15.980606 76.768969 16.011637 25.6 0 51.2-6.392242 76.831031-16.011637 25.6-9.588364 44.807758-25.6 60.788363-41.580606a187.578182 187.578182 0 0 0 41.580606-60.819394c10.550303-24.234667 15.980606-50.362182 16.042667-76.8 0-31.961212-6.392242-60.788364-19.176727-86.388363-12.815515-25.6-32.023273-51.2-57.654303-67.211637-9.557333-6.361212-12.784485-15.949576-15.980606-25.6-3.227152-9.588364 0-19.176727 6.423273-28.765091 6.361212-9.619394 15.980606-12.784485 25.6-16.011636 9.588364-3.196121 19.145697 0 28.76509 6.361212A297.890909 297.890909 0 0 1 716.8 358.4c12.784485 16.011636 25.6 35.188364 35.188364 51.2 9.619394 19.176727 16.011636 38.415515 22.434909 57.592242 6.392242 19.207758 6.392242 41.580606 6.392242 63.984485 3.196121 38.415515-3.227152 73.634909-19.207757 105.658182v-0.062061zM473.584485 265.619394c0-9.588364 3.227152-19.176727 12.815515-28.827152 7.478303-7.974788 17.873455-12.567273 28.796121-12.784484 9.619394 0 19.176727 3.258182 25.6 12.784484 8.005818 7.509333 12.629333 17.904485 12.815515 28.858182v230.4c0 9.557333-3.227152 19.207758-12.815515 25.631031-6.423273 6.361212-15.980606 12.722424-25.6 12.722424-9.619394 0-19.207758-3.196121-28.796121-12.784485-6.392242-6.392242-12.815515-16.011636-12.815515-25.6V265.588364zM512 0C230.4 0 0 230.4 0 512S230.4 1024 512 1024 1024 793.6 1024 512 793.6 0 512 0z" p-id="4413"></path>
        </symbol> 
      </svg>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    dataLoaded: false, // 标记数据是否已加载
                    items: [], // 存储数据的数组
                    message: '商品管理'
                };
            },
            methods: {
                handleLoad() {
                    const vm = this;
                    // 发送GET请求获取数据
                    $.ajax({
                        url: 'api/data.json',
                        type: 'get',
                        // crossDomain: true, // 启用跨域请求
                        dataType: 'json', // 指定数据类型为JSON
                        success(data) {
                            vm.items = data; // 将获取的数据存储到items数组中
                            vm.dataLoaded = true; // 将数据加载状态设置为已加载
                            console.log(vm.items);
                        }
                    });
                }

            },
            mounted() {
                console.log('当前状态：mounted');
                this.handleLoad();
            }
        });

        app.mount('#app');
    </script>
</body>

</html>